<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" type="text/css" href="CSS/style.css" />

</head>
<body>
    <!-- Lists -->
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" @click="selectAll()" :checked="list.length===allSelectedLists.length && list.length">全选</th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <table>
                    <tr v-for="(item,index) in list" v-show="list.length!==0">
                        <td><input type="checkbox" @click="selectSingle(index)"
                            :checked="allSelectedLists.indexOf(item.id)>=0">{{ index+1 }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button @click="handleReduce(index)":disabled="item.count===1">-</button>
                            {{ item.count }}
                            <button @click="handleAdd(index)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                    </tr>
                </table>
            </table>
            <div>总价：￥ {{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        id:1,
                        name:'苹果',
                        price:5,
                        count:70
                    },
                    {
                        id:2,
                        name:'香蕉',
                        price:2,
                        count:10
                    },
                    {
                        id:3,
                        name:'柠檬',
                        price:9,
                        count:34
                    },
                    {
                        id:4,
                        name:'榴莲',
                        price:90,
                        count:2
                    },
                ],
                //控制全选
                allChecked: true,
                //存放被选择的数据
                allSelectedLists: []
            },
            computed:{
                totalPrice:function(){
                    // var total = 0 ;
                    // for(var i = 0 ;i<this.list.length; i++){
                    //     var item = this.list[i];
                    //     total += item.price * item.count;
                    // }
                    // return total.toString().replace(/\B(?=(\d{3})+$)/g,',');

                    var total = 0;
                    //加入选择框以后的计算总价
                    this.list.forEach((item, index) => {
                        if (this.allSelectedLists.indexOf(item.id) !== -1) {
                            total += item.price * item.count;
                        }
                    });
                    return total

                }
            },
            methods:{
                //增减数量
                handleReduce:function(index){
                    if(this.list[index].count===1) return;
                    this.list[index].count--;
                },
                handleAdd:function(index){
                    this.list[index].count++;
                },
                handleRemove:function(index){
                    this.list.splice(index,1);
                },
                //点击全选按钮
                selectAll() {
                    //event.currentTarget.checked表示点击完后该选择框的状态
                    if (!event.currentTarget.checked) {
                        this.allSelectedLists = [];
                    } else {

                        this.allSelectedLists = [];//先置空，然后再重新添加，不然数组里会有重复！因为有可能点击全选之前已经选择了几个单选按钮。也就是数组里已经添加过了对应的id。
                        this.list.forEach((item, index) => {
                            this.allSelectedLists.push(item.id)
                        })
                    }
                    console.log(this.allSelectedLists)
                },
                //点击单选按钮
                selectSingle(index) {
                    if (event.currentTarget.checked) {
                        this.allSelectedLists.push(this.list[index].id)
                    } else {
                        for (var i = 0; i < this.allSelectedLists.length; i++) {
                            if (this.list[index].id === this.allSelectedLists[i]) {
                                this.allSelectedLists.splice(i, 1);
                                this.allChecked = false;
                                break;
                            }
                        }
                    }
                    console.log(this.allSelectedLists)
                },
            }
        })
    </script>
</body>
</html>